<template>
  <div class="fixed-nav">
    <ul class="fix-menu cus-menu">
      <li
        class="active"
        v-for="(item, index) in menuList"
        :key="index"
      >
      
        <router-link v-if="!item.isDialog"
          tag="a"
          :to="{ name: item.path, query: { type: item.type } }"
        >
          <div class="i-box">
            <svg-icon :iconClass="item.icon" class-name="icon-style"></svg-icon>
          </div>
          <span>{{ item.navText }}</span>
        </router-link>
        <div class="d-box" v-else @click="zydDialog">
          <svg-icon :iconClass="item.icon" class-name="icon-style"></svg-icon>
          <p>{{ item.navText }}</p>
        </div>
      </li>
    </ul>
    <!-- <el-drawer
      :visible.sync="drawer"
      :with-header="true"
      :modal="false"
      :size="size"
      ref="drawerRef"
    >
      <customerAddIndex ref="customerInfoEdit" :type="type" />
    </el-drawer> -->
  </div>
</template>

<script>
import svgIcon from "@/components/public/SvnIcon";
// import customerAddIndex from "@/views/customer/CustomerAddIndex";
export default {
  name: "FixedNav",
  props: {
    menuList: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      drawer: false,
      type: "",
      size: "60%",
    };
  },
  components: {
    svgIcon,
    // customerAddIndex,
  },
  created() {},
  mounted() {
    this.$bus.$on("close", function() {
      this.drawer = false;
    });
  },
  methods: {
    close() {
      // 
      // this.drawer = this.$store.state.drawStatus;
    },
    // openView(actionName, type) {
    //   this.drawer = true;
    //   this.type = type;
    //   if (this.type == "dispute") {
    //     this.size = "80%";
    //   } else {
    //     this.size = "60%";
    //   }
    //   this.$nextTick(() => {
    //     // this.$refs.customerInfoEdit.changeViews(actionName);
    //   });
    // },
    handleClose(done) {
      done();
    },
    zydDialog(){
       this.$emit('zydDialogShow')
    }
  },
};
</script>
<style scoped>
.fixed-nav {
  position: fixed;
  height: 200px;
  width: 75px;
  top: 50%;
  right: 15px;
  margin-top: -100px;
  z-index: 5;
}

.fix-menu li {
  width: 70px;
  height: 70px;
  list-style: none;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 50%;
  margin-bottom: 20px;
  cursor: pointer;
}
.fix-menu li a {
  display: block;
  text-align: center;
  color: #fff;
  line-height: 20px;
  padding: 10px 0;
  font-size: 12px;
}

.fix-menu li a .i-box {
  margin-bottom: 5px;
  color: #fff;
}
.fix-menu li .d-box {
  padding: 10px 0;
  text-align: center;
  margin-bottom: 5px;
  color: #fff;
  line-height: 20px;
  font-size: 12px;
}
.fix-menu li:hover {
  background: rgba(0, 47, 255, 0.705);
}
.icon-style {
  color: #fff;
}
</style>
